<template>
  <div>
    <el-pagination
        background
        layout="prev, pager, next"
        page-size="3"
        :total="total"
        @current-change="page">
    </el-pagination>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="id"
        label="编号"
        width="150">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="120">
    </el-table-column>
    <el-table-column
        prop="author"
        label="作者"
        width="120">
    </el-table-column>
    <el-table-column
        prop="publish"
        label="出版商"
        width="120">
    </el-table-column>
    <el-table-column
        prop="price"
        label="价格"
        width="300">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" size="small">更新</el-button>
        <el-button @click="deletebook(scope.row)" type="text" size="small">del</el-button>
      </template>
    </el-table-column>
  </el-table>

  </div>
</template>

<script>
export default {
  methods: {
    deletebook(row){
      axios.delete('http://localhost:8181/book/delete/'+ row.id).then(function (resp) {
        alert(row.name);
      })
    },
    edit(row) {
      console.log(row.id);
      this.$router.push({
      path: "/bookupdate",
        query:{
        id:row.id
        }
      })
    },
    page(currentPage){
      // alert(currentPage)
      const __this = this
      axios.get("http://localhost:8181/book/findAll/"+currentPage+"/3").then(function (resp){
        // console.log(resp)
        __this.tableData = resp.data.content
        __this.total = resp.data.totalElements
      })
    }
  },
  created() {
    const __this = this
    axios.get("http://localhost:8181/book/findAll/1/3").then(function (resp){
      // console.log(resp)
      __this.tableData = resp.data.content
      __this.total = resp.data.totalElements
    })
  },

  data() {
    return {
      total:null,
      tableData: [{
        id: '11',
        name: '王小虎',
        author: 'tom',
        publish: '普陀区',
        price: '12.9'
      },{
        id: '22',
        name: '王虎',
        author: 'ttttom',
        publish: '普区',
        price: '8899'
      }]
    }
  }
}
</script>
